<template>
  <el-dialog
    :model-value="visible"
    title="一键重启Flink作业"
    width="800px"
    :before-close="handleClose"
    @update:model-value="$emit('update:visible', $event)"
  >
    <el-form :model="form" :rules="rules" ref="formRef" label-width="120px">
      <!-- 重启范围 -->
      <el-form-item label="重启范围" prop="restartScope">
        <el-radio-group v-model="form.restartScope">
          <el-radio label="all">重启所有作业</el-radio>
          <el-radio label="module">仅重启指定模块</el-radio>
          <el-radio label="job">仅重启指定作业</el-radio>
          <el-radio label="failed">仅重启失败作业</el-radio>
        </el-radio-group>
      </el-form-item>

      <!-- 模块选择 -->
      <el-form-item
        v-if="form.restartScope === 'module'"
        label="模块选择"
        prop="selectedModules"
      >
        <el-checkbox-group v-model="form.selectedModules">
          <el-checkbox
            v-for="module in availableModules"
            :key="module.moduleName"
            :label="module.moduleName"
          >
            {{ module.moduleName }}
          </el-checkbox>
        </el-checkbox-group>
      </el-form-item>

      <!-- 作业选择 -->
      <el-form-item
        v-if="form.restartScope === 'job'"
        label="作业选择"
        prop="selectedJobs"
      >
        <el-checkbox-group v-model="form.selectedJobs">
          <el-checkbox
            v-for="job in runningJobs"
            :key="job.jobId"
            :label="job.jobId"
          >
            {{ job.jobName }} ({{ job.status }})
          </el-checkbox>
        </el-checkbox-group>
      </el-form-item>

      <!-- 重启参数 -->
      <el-form-item label="时间戳" prop="timestamp" required>
        <el-input
          v-model="form.timestamp"
          placeholder="毫秒级时间戳，留空使用最新"
        />
      </el-form-item>

      <el-form-item label="并行度" prop="parallelism">
        <el-input-number v-model="form.parallelism" :min="1" :max="100" />
      </el-form-item>

      <el-form-item label="环境" prop="environment">
        <el-select v-model="form.environment" placeholder="选择环境">
          <el-option label="dev" value="dev" />
          <el-option label="test" value="test" />
          <el-option label="prod" value="prod" />
        </el-select>
      </el-form-item>

      <el-form-item label="创建SavePoint">
        <el-switch v-model="form.createSavepoint" />
      </el-form-item>

      <el-form-item label="额外参数" prop="extraArgs">
        <el-input
          v-model="form.extraArgs"
          type="textarea"
          placeholder="额外的启动参数"
        />
      </el-form-item>

      <!-- 高级选项 -->
      <el-divider content-position="left">高级选项</el-divider>

      <el-form-item label="最大并发数" prop="maxWorkers">
        <el-input-number v-model="form.maxWorkers" :min="1" :max="20" />
      </el-form-item>

      <el-form-item label="重试次数" prop="retryCount">
        <el-input-number v-model="form.retryCount" :min="1" :max="10" />
      </el-form-item>

      <el-form-item label="重试间隔" prop="retryInterval">
        <el-input-number v-model="form.retryInterval" :min="1" :max="60" />
        <span class="ml-2">秒</span>
      </el-form-item>

      <el-form-item label="停止后等待" prop="waitForStop">
        <el-input-number v-model="form.waitForStop" :min="1" :max="60" />
        <span class="ml-2">秒</span>
      </el-form-item>

      <el-form-item label="忽略MySQL驱动错误">
        <el-switch v-model="form.ignoreMysqlErrors" />
      </el-form-item>
    </el-form>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="handleSubmit" :loading="loading">
          开始重启
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, reactive, watch } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'

interface FlinkJobRestartProps {
  visible: boolean
  onClose: () => void
  onSubmit: (config: any) => void
  availableModules: Array<{
    moduleName: string
    jobName: string
    jarName: string
    entryClass: string
  }>
  runningJobs: Array<{
    jobId: string
    jobName: string
    status: string
  }>
}

const props = defineProps<FlinkJobRestartProps>()
const emit = defineEmits(['update:visible'])

const formRef = ref<FormInstance>()
const loading = ref(false)

const form = reactive({
  restartScope: 'all',
  selectedModules: [] as string[],
  selectedJobs: [] as string[],
  timestamp: '',
  parallelism: 1,
  environment: 'dev',
  createSavepoint: true,
  extraArgs: '',
  maxWorkers: 5,
  retryCount: 3,
  retryInterval: 3,
  waitForStop: 5,
  ignoreMysqlErrors: true
})

const rules: FormRules = {
  restartScope: [
    { required: true, message: '请选择重启范围', trigger: 'change' }
  ],
  timestamp: [
    { required: true, message: '请输入时间戳', trigger: 'blur' }
  ]
}

// 监听visible变化
watch(() => props.visible, (newVal) => {
  if (newVal) {
    // 重置表单
    Object.assign(form, {
      restartScope: 'all',
      selectedModules: [],
      selectedJobs: [],
      timestamp: '',
      parallelism: 1,
      environment: 'dev',
      createSavepoint: true,
      extraArgs: '',
      maxWorkers: 5,
      retryCount: 3,
      retryInterval: 3,
      waitForStop: 5,
      ignoreMysqlErrors: true
    })
  }
})

const handleClose = () => {
  emit('update:visible', false)
  props.onClose()
}

const handleSubmit = async () => {
  if (!formRef.value) return
  
  try {
    await formRef.value.validate()
    loading.value = true
    
    const config = {
      restartScope: form.restartScope,
      selectedModules: form.selectedModules,
      selectedJobs: form.selectedJobs,
      timestamp: form.timestamp,
      parallelism: form.parallelism,
      environment: form.environment,
      createSavepoint: form.createSavepoint,
      extraArgs: form.extraArgs,
      maxWorkers: form.maxWorkers,
      retryCount: form.retryCount,
      retryInterval: form.retryInterval,
      waitForStop: form.waitForStop,
      ignoreMysqlErrors: form.ignoreMysqlErrors
    }
    
    await props.onSubmit(config)
    handleClose()
  } catch (error) {
    console.error('表单验证失败:', error)
  } finally {
    loading.value = false
  }
}
</script>

<style scoped>
.ml-2 {
  margin-left: 8px;
}

.el-divider {
  margin: 20px 0;
}
</style> 